<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
	div{
		width:800px;
		height:500px;
		background-color:#066;
		margin:10px auto;	
		position:relative; 
	}
	
	img{
		position:absolute;
	}
	
	#i1{
		top:100px;
		left:50px;
	}
	
	#i2{
		left:250px;
		top:50px;
		
	}
	
	#i3{
		left:150px;
		bottom:50px;
	
	}
	
	
	/*调整元素的堆叠顺序：序号越大元素越靠上*/
	img:hover{
		z-index:999;
	
	}
	
	 
	
	
		

</style>

</head>
<body>
	<div>
		<img src="../images/1.jpg" id="i1"/>
		<img src="../images/2.jpg" id="i2"/>
		<img src="../images/3.jpg" id="i3"/>
	
	</div>

</body>
</html>